<template>
    <div>
      <!--脚部分的顶部-->
      <div class="footer-top">
        <ul>
          <li v-for="(item,key) in liList" :key="key">{{item}}</li>
        </ul>
      </div>
      <!--中间部分-->
      <div class="footer-center">
        <!--关于部分-->
        <ul class="about">
          <li class="title">ABOUT</li>
          <li>About us</li>
          <li>Our charter</li>
          <li>Stats</li>
          <li>Press</li>
          <li>Jobs</li>
        </ul>
        <!--帮助部分-->
        <ul class="help">
          <li class="title">HELP</li>
          <li>Help Center</li>
          <li>Support</li>
          <li>Our Rules</li>
          <li>Creator Handbook</li>
          <li>Campus</li>
        </ul>
        <!--你好部分-->
        <ul class="hello">
          <li class="title">HELLO</li>
          <li>Kickstarter Blog</li>
          <li>Engineering Blog</li>
          <li>Newsletters</li>
        </ul>
        <div class="clear"></div>
        <!--左下角的版权部分-->
        <div class="copyright">
          <span></span>
          <span>Kickstarter,PBC © 2018</span>
        </div>
        <!--右下角的选择区域-->
        <div class="change">
          <!--<el-dropdown>-->
          <!--<el-button>-->
          <!--English-->
          <!--</el-button>-->
          <!--<el-dropdown-menu></el-dropdown-menu>-->
          <!--</el-dropdown>-->
          <span class="nation">
          English
        </span>
          <span class="money">
          $ US Dollar(USD)
        </span>
        </div>
        <div class="clear"></div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "setting-footer-top",
        data() {
          return{
            liList:[ 'Arts', 'Comics&Illustration', 'Design&Tech', 'Film', 'Food&Craft', 'Games', 'Music', 'Publishing' ],
          }
        }
    }
</script>

<style scoped>
  /*公共样式*/
  .clear{
    clear: both;
  }
  /*脚部分的顶部*/
  .footer-top{
    line-height:82px;
    border-bottom: 1px solid #DBDEDD;
    border-top: 1px solid #DBDEDD;
    padding-left: 96px;
    box-sizing: border-box;
  }
  .footer-top ul{
    padding: 0;
    margin: 0;
  }
  .footer-top li{
    display: inline-block;
    margin-right: 35px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #2E2E2E;
    letter-spacing: 0.2px;
  }
  /*脚部的中间部分*/
  .footer-center{
    padding:58px 0 0 96px ;
  }
  .footer-center ul{
    float: left;
  }
  .footer-center li{
    list-style: none;
    line-height: 20px;
    margin-bottom: 1px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #2E2E2E;
    letter-spacing: 0;

  }
  .footer-center .title{
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #2E2E2E;
    letter-spacing: 0;
    margin-bottom: 17px;
  }
  /*关于部分*/
  .about{
    width: 75px;
    margin-right: 245px;
  }
  /*帮助部分*/
  .help{
    width: 120px;
    margin-right:201px;
  }
  /*左下角的版权部分*/
  .copyright{
    padding-top: 76px;
    float: left;
  }
  .copyright span{
    display: inline-block;
    vertical-align: middle;
  }
  .copyright span:nth-child(1){
    width:24px;
    height:24px;
    border: 1px dashed #999999;
    margin-right: 15px;
  }
  /*右下角的选择部分*/
  .change{
    float: left;
    margin-bottom: 59px;
  }
  .change span{
    display: inline-block;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #808080;
    letter-spacing: 0;
  }
  .nation{
    width: 118px;
    line-height: 60px;
    background: #FFFFFF;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.15), -2px -2px 2px 0 rgba(0,0,0,0.15);
    padding-left: 25px;
    box-sizing: border-box;
    margin:57px 15px 0 665px ;
  }
  .money{
    width: 238px;
    line-height: 60px;
    background: #FFFFFF;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.15), -2px -2px 2px 0 rgba(0,0,0,0.15);
    padding-left: 22px;
    box-sizing: border-box;
  }
</style>
